<template>
	<div id="advert">
		<!--<div class="adver_item">
			<div class="advert_logo"></div>
			免费领取
		</div>-->
		<div class="adver_item" @click="openPhone()">
			<div class="advert_logo"></div>
			客服热线
		</div>
		<div class="adver_item" @click="openWechat()">
			<div class="advert_logo"></div>
			公众号
		</div>
		
		<div class="phone" hidden tabindex="1">
			<div class="phone_left">
				客服<br/>
				热线
			</div>
			<div class="phone_right">
				010-8748-4928
				<br>189-1163-6512
			</div>
		</div>
		
		<div class="wechat" hidden tabindex="2">
			<div class="wechat_img"></div>
		</div>
	</div>
</template>

<script>
var $phone,$wechat;
export default {
	data : function() {
		return {
			
		}
	},
	methods : {
		openPhone : function() {
			if($phone.css("display") == "none") {
				$phone.fadeIn(300);
				$phone.focus();
			}
		},
		openWechat : function() {
			if($wechat.css("display") == "none") {
				$wechat.fadeIn(300);
				$wechat.focus();
			}
		}
	},
	mounted : function() {
		$phone = $("#advert .phone");
		$wechat = $("#advert .wechat");
		
		$phone.blur(function() {
		    $(this).fadeOut(300);
		});
		$wechat.blur(function() {
		    $(this).fadeOut(300);
		});
	}
}
</script>

<style scoped>
	#advert {
		position: absolute;
		/*top: 4.1rem;*/
		top: 3.8rem;
		right: 0.25rem;
		width: 0.8rem;
		/*height: 2.8rem;*/
		height : 1.93rem;
		padding-top: 0.22rem;
		background: white;
		border-radius: 0.4rem ;
		box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.15);
		z-index: 3;
	}
	.adver_item {
		height: 0.66rem;
		font-size: 0.12rem;
		line-height: 0.24rem;
		color: #6f6f6f;
		text-align: center;
		cursor: pointer;
		margin-bottom: 0.21rem;
	}
	.advert_logo {
		height: 0.4rem;
	}
	/*.adver_item:nth-child(1) .advert_logo{
		background: url(../../assets/img/common/free.png) no-repeat
					center / 0.33rem 0.4rem;
	}*/
	.adver_item:nth-child(1) .advert_logo{
		background: url(../../assets/img/common/phone.png) no-repeat
					center / 0.37rem 0.38rem;
	}
	.adver_item:nth-child(2) .advert_logo{
		background: url(../../assets/img/common/wechat.png) no-repeat
					center / 0.4rem 0.32rem;
	}
	
	.phone {
		position: absolute;
		/*top: 1rem;*/
		top: 0.13rem;
		left: -2.36rem;
		width: 2.3rem;
		height: 0.7rem;
		border-radius: 0.35rem;
		background: white;
		color: #333333;
		box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.15);
	}
	.phone_left {
		float: left;
		width: 0.7rem;
		margin-top: 0.1rem;
		padding-top: 0.05rem;
		height: 0.5rem;
		line-height: 0.2rem;
		padding-left: 0.26rem;
		font-size: 0.14rem;
		border-right: 0.01rem solid #e3e3e3;
	}
	.phone_right {
		float: left;
		width: 1.6rem;
		margin-top: 0.1rem;
		padding-top: 0.05rem;
		height: 0.5rem;
		line-height: 0.2rem;
		/*line-height: 0.5rem;*/
		padding-left: 0.16rem;
		font-size: 0.16rem;
		/*outline: 1px solid red;*/
	}
	
	.wechat {
		position: absolute;
		/*top: 1.15rem;*/
		top: 0.28rem;
		left: -2.36rem;
		width: 2.3rem;
		height: 2.3rem;
		border-radius: 0.1rem;
		background: white;
		color: #333333;
		box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.15);
	}
	.wechat_img {
		width: 100%;
		height: 100%;
		background: url(../../assets/img/common/wechat_code.jpg) no-repeat
		 			center / 2.1rem;
	}
	.phone:focus, .wechat:focus {
		outline: none;
	}
</style>